<template>
  <view class="user">
    <view class="sec1">
      <view class="cet">
        <view class="lef">
          <image
            v-if="!headportrait || !userInfo.avatar"
            class="toux"
            src="https://www.123qifu.com/onlineimages/static/user/toux.png"
            mode=""
          />
          <image
            v-else
            class="toux"
            :src="userInfo.avatar"
            mode=""
            @click="topersonal"
          />
          <view>
            <text class="name">{{ nickname }}</text>
            <text class="mobild">{{ mobile | mobileStr }}</text>
          </view>
        </view>
        <!-- <view class="rig" @click="pushPath('setup/setup')">
          <image class="set" src="https://www.123qifu.com/onlineimages/static/user/settin.png" mode="" />设置
        </view> -->
      </view>
    </view>
    <view class="sec2">
      <view class="sec2t">我的订单</view>
      <view class="tabs">
        <view class="tab" @click="pushPath('../user/Myorder/Myorder?type=1')">
          <image
            class="imgt"
            src="https://www.123qifu.com/onlineimages/static/user/dfk.png"
            mode=""
          />
          <text>待付款</text>
          <view v-if="payNum != 0" class="nums">{{ payNum || 0 }}</view>
        </view>
        <view class="tab" @click="pushPath('../user/Myorder/Myorder?type=2')">
          <image
            class="imgt"
            src="https://www.123qifu.com/onlineimages/static/user/dsh.png"
            mode=""
          />
          <text>待收货</text>
          <view v-if="receiveNum != 0" class="nums">{{ receiveNum || 0 }}</view>
        </view>
        <view class="tab" @click="pushPath('../user/Myorder/Myorder?type=3')">
          <image
            class="imgt"
            src="https://www.123qifu.com/onlineimages/static/user/dpj.png"
            mode=""
          />
          <text>待评价</text>
          <view v-if="commentNum != 0" class="nums">{{ commentNum || 0 }}</view>
        </view>
        <view class="tab" @click="pushPath('../user/Myorder/Myorder?type=4')">
          <image
            class="imgt"
            src="https://www.123qifu.com/onlineimages/static/user/tk.png"
            mode=""
          />
          <text>退款/售后</text>
          <view v-if="salesNum != 0" class="nums">{{ salesNum || 0 }}</view>
        </view>
        <view class="tab" @click="pushPath('../user/Myorder/Myorder?type=0')">
          <image
            class="imgt"
            src="https://www.123qifu.com/onlineimages/static/user/qbdd.png"
            mode=""
          />
          <text>全部订单</text>
        </view>
      </view>
    </view>
    <view class="sec3">
      <view class="sec2t">我的资产</view>
      <view class="sec2r">
        <view
          class="qb"
          @click="pushPath('../../orderPackages/pages/balance/balance')"
        >
          <p @click.stop="open1 = !open1">
            我的钱包
            <image
              v-if="open1"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/user/open.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/user/close.png"
              mode=""
            />
          </p>
          <span v-if="open1">￥{{ userInfo.money || "0.00" }}</span>
          <span v-else>****</span>
        </view>
        <view
          class="yj"
          @click="pushPath('../../orderPackages/pages/commission/commission')"
        >
          <p @click.stop="open2 = !open2">
            我的佣金
            <image
              v-if="open2"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/user/open.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/user/close.png"
              mode=""
            />
          </p>
          <span v-if="open2">￥{{ userInfo.now_income || "0.00" }}</span>
          <span v-else>****</span>
        </view>
      </view>
    </view>
    <view class="sec4">
      <view class="sec2t">更多服务</view>
      <view class="row1">
        <view class="icopn" @click="pushPath('../Shopping/addressList')">
          <image
            class="iocpm"
            src="https://www.123qifu.com/onlineimages/static/user/icon1.png"
            mode=""
          />
          <text>收货地址</text>
        </view>
        <view
          class="icopn"
          @click="pushPath('../../orderPackages/pages/Mybill/Mybill')"
        >
          <image
            class="iocpm"
            src="https://www.123qifu.com/onlineimages/static/user/icon2.png"
            mode=""
          />
          <text>我的账单</text>
        </view>
        <!-- <view class="icopn" @click="pushPath('../../orderPackages/pages/Mybill/Blessingrecord')">
          <image class="iocpm" src="https://www.123qifu.com/onlineimages/static/user/icon3.png" mode="" />
          <text>祈福记录</text>
        </view> -->
        <view
          class="icopn"
          @click="pushPath('../../orderPackages/pages/invitation/invitation')"
        >
          <image
            class="iocpm"
            src="https://www.123qifu.com/onlineimages/static/user/icon4.png"
            mode=""
          />
          <text>邀请有礼</text>
        </view>
        <view
          class="icopn"
          @click="pushPath('../../orderPackages/pages/follow/follow')"
        >
          <image
            class="iocpm"
            src="https://www.123qifu.com/onlineimages/static/user/icon5.png"
            mode=""
          />
          <text>关注的人</text>
        </view>
      </view>
      <view class="row2">
        <view
          class="icopn"
          @click="pushPath('../../orderPackages/pages/works/works')"
        >
          <image
            class="iocpm"
            src="https://www.123qifu.com/onlineimages/static/user/icon6.png"
            mode=""
          />
          <text>我的发布</text>
        </view>
        <view
          class="icopn"
          @click="pushPath('../../orderPackages/pages/feedback/feedback')"
        >
          <image
            class="iocpm"
            src="https://www.123qifu.com/onlineimages/static/user/icon7.png"
            mode=""
          />
          <text>意见反馈</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { logins } from "../../common/login";
export default {
  data() {
    return {
      nickname: "",
      mobile: "",
      userInfo: [],
      headportrait: false,
      isAuthenticationStr: "", // 是否实名认证
      payNum: "",
      receiveNum: "",
      commentNum: "",
      salesNum: "",
      open1: true,
      open2: true,
    };
  },
  onShow() {
    this.getuserInfo();
    this.getMyOrderNum();
  },
  methods: {
    topersonal() {
      uni.navigateTo({
        url: "./personal/personal",
      });
    },
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        data: {},
      });
      if (res.data.code == 1) {
        that.headportrait = true;
        that.userInfo = res.data.data;
        that.nickname = that.userInfo.nickname;
        that.mobile = that.userInfo.mobile;
        that.isAuthenticationStr = that.userInfo.isAuthenticationStr;
      } else if (res.data.code == -1) {
        // logins();
      }
    },
    // 获取我的订单数量
    async getMyOrderNum() {
      let that = this;
      const res = await that.$myRequest({
        url: "order/getMyOrderNum",
        method: "post",
        data: {},
      });
      if (res.data.code == 1) {
        that.payNum = res.data.data.payNum;
        that.receiveNum = res.data.data.receiveNum;
        that.commentNum = res.data.data.commentNum;
        that.salesNum = res.data.data.salesNum;
      }
    },
    // 实名认证
    jump() {
      uni.navigateTo({
        url: "./authentication/authentication",
      });
    },
    // 路由跳转
    pushPath(item) {
      uni.navigateTo({
        url: item,
      });
    },
  },
  filters: {
    mobileStr(str) {
      if (str.length > 7) {
        return str.substring(0, 3) + "****" + str.substring(7, str.length);
      } else {
        return str.substring(0, str.length - 1) + "****";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.user {
  .sec1 {
    width: 100%;
    height: 410rpx;
    background: url("https://www.123qifu.com/onlineimages/static/user/bg.png")
      no-repeat;
    background-size: 100% 100%;
    .cet {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 55rpx 43rpx 0 30rpx;
      .lef {
        display: flex;
        align-items: center;
        justify-content: center;
        .toux {
          display: block;
          width: 122rpx;
          height: 122rpx;
          border-radius: 50%;
          border: 12rpx solid rgba(255, 255, 255, 0.2);
          margin-right: 29rpx;
        }
        .name {
          display: block;
          font-size: 34rpx;
          font-weight: 500;
          color: #fffefe;
        }
        .mobild {
          display: block;
          font-size: 26rpx;
          font-weight: 400;
          color: #fffefe;
          margin-top: 8rpx;
        }
      }
      .rig {
        width: 140rpx;
        height: 56rpx;
        border: 2rpx solid #ffffff;
        border-radius: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 24rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #fffefe;
        .set {
          display: block;
          width: 30rpx;
          height: 28rpx;
        }
      }
    }
  }
  .sec2 {
    width: 702rpx;
    height: 260rpx;
    background: #ffffff;
    border-radius: 22rpx;
    margin: -130rpx auto 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 40rpx 0;
    .sec2t {
      position: relative;
      font-size: 32rpx;
      font-weight: 550;
      color: #333333;
      box-sizing: border-box;
      padding-left: 40rpx;
    }
    .sec2t::before {
      position: absolute;
      content: "";
      width: 10rpx;
      height: 10rpx;
      background: #c52b2e;
      border-radius: 50%;
      left: 16rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .tabs {
      box-sizing: border-box;
      padding: 0 23rpx;
      margin-top: 45rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tab {
        position: relative;
        .imgt {
          display: block;
          width: 46rpx;
          height: 40rpx;
          margin: 0 auto;
        }
        text {
          display: block;
          text-align: center;
          margin-top: 20rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
        }
        .nums {
          position: absolute;
          top: -15rpx;
          right: -5rpx;
          width: 35rpx;
          height: 35rpx;
          border-radius: 50%;
          text-align: center;
          line-height: 35rpx;
          font-size: 18rpx;
          color: #fff;
          background: #c52b2e;
          border: 2rpx solid #fff;
        }
      }
      .tab:nth-child(4) {
        .nums {
          right: 10rpx;
        }
      }
    }
  }
  .sec3 {
    width: 702rpx;
    height: 320rpx;
    background: #ffffff;
    border-radius: 22rpx;
    margin: 30rpx auto 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 40rpx 0;
    .sec2t {
      position: relative;
      font-size: 32rpx;
      font-weight: 550;
      color: #333333;
      box-sizing: border-box;
      padding-left: 40rpx;
    }
    .sec2t::before {
      position: absolute;
      content: "";
      width: 10rpx;
      height: 10rpx;
      background: #c52b2e;
      border-radius: 50%;
      left: 16rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .sec2r {
      box-sizing: border-box;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      .qb {
        width: 310rpx;
        height: 168rpx;
        background: url("https://www.123qifu.com/onlineimages/static/user/qb.png")
          no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 42rpx 30rpx;
        p {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          font-weight: 400;
          color: #fefefe;
          .img {
            display: block;
            width: 34rpx;
            height: 22rpx;
            margin-left: 9rpx;
          }
        }
        span {
          display: block;
          font-size: 30rpx;
          font-weight: 400;
          color: #fefefe;
          margin-top: 10rpx;
        }
      }
      .yj {
        width: 310rpx;
        height: 168rpx;
        background: url("https://www.123qifu.com/onlineimages/static/user/yj.png")
          no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 42rpx 30rpx;
        p {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          font-weight: 400;
          color: #fefefe;
          .img {
            display: block;
            width: 34rpx;
            height: 22rpx;
            margin-left: 9rpx;
          }
        }
        span {
          display: block;
          font-size: 30rpx;
          font-weight: 400;
          color: #fefefe;
          margin-top: 10rpx;
        }
      }
    }
  }
  .sec4 {
    width: 702rpx;
    height: 410rpx;
    background: #ffffff;
    border-radius: 22rpx;
    margin: 30rpx auto 30rpx;
    overflow: hidden;
    box-sizing: border-box;
    padding: 40rpx 0;
    .sec2t {
      position: relative;
      font-size: 32rpx;
      font-weight: 550;
      color: #333333;
      box-sizing: border-box;
      padding-left: 40rpx;
    }
    .sec2t::before {
      position: absolute;
      content: "";
      width: 10rpx;
      height: 10rpx;
      background: #c52b2e;
      border-radius: 50%;
      left: 16rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .row1 {
      box-sizing: border-box;
      padding: 0 23rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
      .icopn {
        .iocpm {
          display: block;
          width: 46rpx;
          height: 50rpx;
          margin: 0 auto;
        }
        text {
          display: block;
          text-align: center;
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          margin-top: 20rpx;
        }
      }
    }
    .row2 {
      box-sizing: border-box;
      padding: 0 393rpx 0 23rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 50rpx;
      .icopn {
        .iocpm {
          display: block;
          width: 46rpx;
          height: 50rpx;
          margin: 0 auto;
        }
        text {
          display: block;
          text-align: center;
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          margin-top: 15rpx;
        }
      }
    }
  }
}
</style>
